import { FaUserTie, FaChartLine, FaDollarSign, FaCubes } from 'react-icons/fa';

export default function Advantages() {
  const advantages = [
    {
      icon: FaUserTie,
      title: '专业团队',
      description: '15年财税行业经验，注册会计师高效应对各行业企业财税问题'
    },
    {
      icon: FaChartLine,
      title: '实时监控',
      description: '短信、小程序及服务号实时推送流程节点，企业财税状况随时查看'
    },
    {
      icon: FaDollarSign,
      title: '价格透明',
      description: '所有业务收费标准规范，拒绝任何隐形消费，性价比行业领先'
    },
    {
      icon: FaCubes,
      title: '一站式服务',
      description: '提供工商注册公司、代理记账、税收管理、社保等全周期企业服务'
    }
  ];

  return (
    <div className="bg-gray-50 py-16 sm:py-24">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">我们的优势</h2>
          <p className="mt-2 text-lg leading-8 text-gray-600">Our advantage</p>
        </div>
        <div className="mx-auto mt-16 grid max-w-7xl grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
          {advantages.map((advantage, index) => (
            <div
              key={index}
              className="relative flex flex-col items-center text-center p-6"
            >
              <div className="mb-6 rounded-full bg-primary/10 p-4">
                <advantage.icon className="h-8 w-8 text-primary" />
              </div>
              <h3 className="text-xl font-semibold text-gray-900 mb-4">{advantage.title}</h3>
              <p className="text-gray-600 leading-relaxed">{advantage.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
} 